<template>
  <div>
    <!--右边-->
    <div class="h-27">
      <div class="k-1">
        <div class="k-2">我的账单</div>
        <div class="k-3">
          <form class="layui-form k-4" action>
            <div class="layui-form-item" style="display:flex;    align-items: center;">
              <label class="layui-form-label">日期</label>
              <div style="width: 140px;margin-right: 3px;">
                <el-date-picker
                  style="width: 140px;margin-right: 3px;"
                  v-model="startTimes"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>

              <div>--</div>
              <div style="width: 140px;margin-right: 3px;">
                <el-date-picker
                  style="width: 140px;margin-right: 3px;"
                  v-model="endTime"
                  type="date"
                  value-format
                  placeholder="选择结束日期"
                ></el-date-picker>
              </div>
              <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label">作品名称</label>
                <div class="layui-input-inline" style="width: 140px;">
                  <input
                    v-model="projectName"
                    type="text"
                    name="email"
                    lay-verify="email"
                    autocomplete="off"
                    class="layui-input"
                    placeholder="请输入作品名称"
                  />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">订单编码搜索</label>
                <div class="layui-input-inline" style="width: 140px;">
                  <input
                    v-model="contractNo"
                    type="text"
                    name="email"
                    lay-verify="email"
                    autocomplete="off"
                    class="layui-input"
                    placeholder="请输入订单编码"
                  />
                </div>
              </div>
              <div style="  margin-left: 0;" @click="getmyContract(1)" class="layui-btn">查询</div>
            </div>
          </form>
        </div>
      </div>
      <div class="k-5">
        <div class="k-2">
          详细记录
          <!-- <div class="k-6">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">批量下载</button>
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">删除</button>
          </div>-->
        </div>
        <div class="k-7">
          <table class="k-8">
            <thead>
              <tr>
                <!-- <th width="7.5%">
                  <input type="checkbox" id="j_cbAll" />全选
                </th>-->
                <th width="17%">订单号</th>
                <th width="12%">成交时间</th>
                <th width="12%">成交价格</th>
                <th width="9%">成交主体</th>
                <th width="17%">作品名称</th>
                <th width="10%">状态</th>
                <!-- <th width="16%">编辑</th> -->
              </tr>
            </thead>
            <tbody id="j_tb">
              <tr v-for="(item,index) in rows" :key="index">
                <!-- <td>
                  <input type="checkbox" />
                </td>-->
                <td class="e-1">{{item.orderNo}}</td>
                <td>{{item.dealTime|Time}}</td>
                <td>{{item.dealPrice}}</td>
                <td>{{item.dealSubject}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.status==1?'已完成':'未完成'}}</td>
              </tr>
            </tbody>
          </table>
          <div class="a-35 h-48">
            <mo-paging
              :page-index="currentPage"
              :total="totalPage"
              :page-size="pageSize"
              @change="pageChange"
            ></mo-paging>
          </div>
        </div>
      </div>
    </div>
    <div style="clear: both;"></div>
  </div>
</template>

<script>
import moment from "moment";
import http from "@/api/home";
import MoPaging from "@/views/Page";
export default {
  name: "mybill",
  components: {
    MoPaging,
  },
  data() {
    return {
      startTimes: moment().subtract("months", 1).format("YYYY-MM-DD"),
      endTime: moment().format("YYYY-MM-DD"),
      rows: Array,
      pageSize: 10, //每页显示20条数据
      totalPage: 1, //总记录数
      currentPage: 1, //作品与项目挂牌当前页码
      projectName: null,
      contractNo: null,
    };
  },
  methods: {
    // 下一页
    pageChange(e) {
      this.currentPage = e;
      this.getmyContract();
    },
    getmyContract(e) {
      // var datas = `contractNo=${this.contractNo}&productName=${this.projectName}&pageNum=${this.currentPage}&pageSize=10`;

      if (e == 1) {
        this.currentPage = 1;
      }
      var datas = {
        pageNum: this.currentPage,
        pageSize: 10,
        startTime: moment(this.startTimes).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.endTime).format("YYYY-MM-DD 23:59:59"),
      };
      if (this.contractNo) {
        datas.contractNo = this.contractNo;
      }
      if (this.projectName) {
        datas.productName = this.projectName;
      }
      http.ZDlist({ datas }).then((res) => {
        if (res.code == 200) {
          this.totalPage = res.total;
          this.rows = res.rows;
        }
      });
    },
  },
  created() {
    this.getmyContract();
  },
  filters: {
    Time(value) {
      return moment(value).format("YYYY-MM-DD");
    },

    projectType(value) {
      let arr = [
        "图书",
        "期刊",
        "杂志",
        "报纸",
        "电影",
        "电视剧",
        "网剧",
        "综艺",
        "脱口秀",
        "纪录片",
        "专题片",
        "动漫",
        "少儿",
        "MTV",
        "演唱会",
      ];
      return arr[value];
    },
  },
};
</script>

<style scoped>
@import "../../layui/css/layui.css";
@import "../../css/user_contract.css";
@import "../../css/index.css";
@import "../../css/user_listing.css";
@import "../../css/idangerous.swiper.css";
</style>